<template>
  <div class="risk">
    <div class="add" @click="add" v-if="this.active === 0">新增</div>
    <eagle-tab-page-list
      url="/PlanEmergencyOrgTeam/GetPageData"
      :params="params"
      @initActive="_initActive"
      @initList="_initList"
      ref="eagleTabPageList"
    >
      <div v-if="this.active === 0">
        <eagle-cell class="card" v-for="(item, index) in list" :key="index">
          <div @click="goToDetail(item)">
            <eagle-row>
              <eagle-col span="24">
                <h3>{{ item.EmergencyTeamName }}</h3>
              </eagle-col>
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_type.png"
                  alt=""
                />适用范围：{{ item.Scope }}</eagle-col
              >
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_phone.png"
                  alt=""
                />组长/电话：{{ item.TeamNamePhone || "暂无" }}
              </eagle-col>
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_user.png"
                  alt=""
                />最近修改人：{{ item.EditChnName }}
              </eagle-col>
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_date.png"
                  alt=""
                />最近修改日期：{{ gettimeS(item.EditDate) }}
              </eagle-col>
            </eagle-row>
            <eagle-divider />
            <eagle-button
              class="ml-10 mt-10"
              style="float: right;height:30px;"
              size="small"
              type="default"
              @click.stop="edit(item)"
              >编辑
            </eagle-button>
            <eagle-button
              class="ml-10 mt-10"
              style="float: right;height:30px;"
              size="small"
              type="default"
              @click.stop="del(item)"
              >删除
            </eagle-button>
          </div>
        </eagle-cell>
      </div>
      <div v-if="this.active === 1">
        <eagle-cell class="card" v-for="(item, index) in list" :key="index">
          <div @click="goToDetailByID(item)">
            <eagle-row>
              <eagle-col span="24">
                <h3>{{ item.EmergencyTeamName }}</h3>
              </eagle-col>
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_type.png"
                  alt=""
                />适用范围：{{ item.Scope }}</eagle-col
              >
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="12">
                <img
                  src="@/assets/Images/AppIcon/icon_list_task.png"
                  alt=""
                />应急职务：{{ item.TeamMemberTypeName }}</eagle-col
              >
              <eagle-col span="12">
                <img
                  src="@/assets/Images/AppIcon/icon_list_user.png"
                  alt=""
                />成员姓名：{{ item.TeamMemberName }}</eagle-col
              >
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_date.png"
                  alt=""
                />加入日期：{{ getDate(item.JoinDate) }}</eagle-col
              >
            </eagle-row>
          </div>
        </eagle-cell>
      </div>
    </eagle-tab-page-list>
  </div>
</template>

<script>
import { getDate, getDateTime } from "@/utils/getDate.js";
export default {
  data() {
    return {
      active: 0,
      list: [],
      params: [
        {
          title: "应急响应团队管理",
          dataType: "List",
        },
        {
          title: "应急响应团队一览",
          dataType: "ListView",
        },
      ],
    };
  },
  methods: {
    _initActive(active) {
      this.active = active;
    },
    _initList(list) {
      let dataList = list;
      dataList.forEach((element) => {
        if (element.ListMember) {
          element.TeamNamePhone = "";
          element.ListMember.forEach((eleMember) => {
            if (eleMember.TeamMemberType == "1") {
              element.TeamNamePhone +=
                eleMember.TeamMemberName +
                "/" +
                eleMember.TeamMemberPhone +
                "\t";
            }
          });
        }
      });
      this.list = dataList;
    },
    gettimeS(data) {
      return getDateTime(data);
    },
    getDate(data) {
      return getDate(data);
    },
    del(item) {
      const _this = this;
      const id = item.ID;
      this.$dialog
        .confirm({
          title: "询问",
          message: "您确定删除本条记录吗？",
        })
        .then(() => {
          _this.$axios
      	  .get("/PlanEmergencyOrgTeam/Delete",{params:{ id: item.ID }})
          .then((res) => {
            _this.$toast.success("删除成功！");
            _this.$refs.eagleTabPageList.getList();
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    goToDetail(item) {
      this.$router.push({
        path: "/PlanEmergencyOrgTeamView",
        query: { code: item.EmergencyTeamCode, isFirstShow: true },
      });
    },
    goToDetailByID(item) {
      this.$router.push({
        path: "/PlanEmergencyOrgTeamView",
        query: {
          id: item.TeamMemberID,
          code: item.EmergencyTeamCode,
          isNextShow: true,
          isShowCard: true,
        },
      });
    },
    add() {
      this.$router.push({
        path: "/PlanEmergencyOrgTeamAdd",
        query: { id: 0 },
      });
    },
    edit(item) {
      this.$router.push({
        path: "/PlanEmergencyOrgTeamEdit",
        query: { id: item.ID },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.risk {
  height: 100vh;
  background-color: #e8f1f8;
  .info_search {
    padding: 10px;
    border-radius: 5px !important;
    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}
.dep_sort {
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
}
</style>
